import React, { Component } from "react";

class App extends Component {
  state = {
    name: "xiaohua",
    count: 1,
    show: true,
    list: [111, 222, 333],
  };

  handleClick = () => {
    // 不能直接修改state的值，没有响应式的
    // 必须要使用setState方法来修改

    // setState里面有两个参数
    // 第一个参数可以是一个对象，这个对象会和state对象合并
    // 第二个参数是一个可选的回调函数,会在数据改变完之后调用
    // this.setState(
    //   {
    //     name: "dahua",
    //   },
    //   () => {
    //     console.log(this.state.name);
    //   }
    // );

    // 第一个参数也可以是函数返回对象
    // 第二个参数是一个可选的回调函数,会在数据改变完之后调用
    // 如果说数据要改成一个固定的值，用对象的写法，更简单
    // 如果说这一次的改动要基于前一次的值，用函数的写法，更安全
    // this.setState(
    //   (prevState) => {
    //     return {
    //       count: prevState.count + 1,
    //     };
    //   },
    //   () => {
    //     console.log(this.state.count);
    //   }
    // );

    // setState方法是异步的
    // 18版本开始做了更新，所有的setState都变成异步了
    // 18版本之前，是有区别的
    // 合成事件以及生命周期里面是异步的
    // 在定时器里面和原生js里面是同步的

    // 如果想省略大括号和return，需要加小括号
    // this.setState((prevState) => ({
    //   show: !prevState.show,
    // }));

    // this.setState(
    //   (prevState) => ({
    //     // list: prevState.list.push(444), ×
    //     // list: prevState.list.concat(444), √
    //     list: [...prevState.list, 444], √
    //   }),
    //   () => {
    //     console.log(this.state.list);
    //   }
    // );

    // 仅限于复杂数据类型
    this.state.list.push(444);
    this.setState({});
  };

  render() {
    return (
      <>
        <h2>state的修改</h2>
        <p>name: {this.state.name}</p>
        <p>count: {this.state.count}</p>
        {this.state.show && <p>你看到我了</p>}
        <button onClick={this.handleClick}>btn</button>

        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </>
    );
  }

  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({
    //     name: "dahua",
    //   });
    //   console.log(this.state.name);
    // }, 2000);
    // addEventListener("scroll", () => {});
  }
}

export default App;
